<template>
  <div class="zong">
    <form id="imageForm">
      <div class="footer_helpFeedback" :class="{'isFixed': isFixed}">
        <p :class="{hot:indexTab == 0}" @click="tabSwitch(0)" class="color_p"><span>常见问题</span></p>
        <p :class="{hot:indexTab == 1}" @click="tabSwitch(1)"><span>问题反馈</span></p>
      </div>

      <!-- 常见问题-->
      <div v-show="indexTab == 0 " class="content_helpFeedback">
        <div class="content_helpFeedback_01">
          <div><span>Q 如何获得商券？</span></div>
          <div>
            <p>使用一定数额的芸券兑换商家发放的商券。</p>
            <p>使用芸券购买小芸或其他用户挂单出售的商券。</p>
            <p>在商家消费，店员扫描您的账户码向您发放商券。</p>
            <p>在商家消费，满足一定的活动金额，系统会自动向您发放商劵。</p>
            <p>发起对店员的打赏，会收到商劵作为回礼。</p>
            <p>通过券友分享商劵获得。</p>
          </div>
        </div>
        <div class="content_helpFeedback_01">
          <div><span>Q 如何获得芸券？</span></div>
          <div>
            <p>首次关注“芸券”公众号注册成为新用户，系统赠送您666芸券。</p>
            <p>首次关注“芸券”公众号注册成为新用户，系统赠送您新手大礼包内含100芸券。</p>
            <p>每使用商劵买单一次，系统赠送10芸券。</p>
            <p>每发表一条评论，系统赠送5芸券。</p>
            <p>进入首页面点击右下角小铲子图标参与挖宝游戏，可获得数量不等的芸券或道具等奖励。</p>
            <p>挂单出售已有商劵可赚取一定量的芸券。</p>
          </div>
        </div>
        <div class="content_helpFeedback_01">
          <div><span>Q 如何添加与删除券友？</span></div>
          <div>
            <p>点击【我的】>【券友圈】>左上角“+”，输入券友芸券号进行搜索，在搜索结果中点击【添加券友】，对方在消息中心点击【接受】，即可成功添加。</p>
            <p>点击【我的】>【券友圈】，左滑想要删除的券友，点击【删除】按钮即可。</p>
          </div>
        </div>
        <div class="content_helpFeedback_01">
          <div><span>Q 已有的商劵在哪里查看？</span></div>
          <div>
            <p>进入芸券公众号首页，点击【商券】即可查看。</p>
            <p>进入【我的】，点击【商券】查看。</p>
          </div>
        </div>
        <div class="content_helpFeedback_01">
          <div><span>Q 账户码在哪里查看？</span></div>
          <div>
            <p>进入芸券公众号首页，点击【账户码】即可查看。</p>
            <p>进入【我的】，点击个人头像，在个人信息页点击【账户码】即可查看。</p>
          </div>
        </div>
        <div class="content_helpFeedback_01">
          <div><span>Q 如何将自己的商劵分享给券友？</span></div>
          <div>
            <p>进入【商券】，点击商劵左下方【分享】按钮，选择分享的券友，点击【确定】即可。</p>
            <p>进入【券友圈】选择券友，点击【分享】按钮，点击右上角【选券】勾选要分享的商劵，点击【确定】即可成功分享。</p>
          </div>
        </div>
        <div class="content_helpFeedback_01">
          <div><span>Q 如何出售商劵？</span></div>
          <div>
            <p>进入【商券】，点击商劵右下方【出售】，选择【出售给小芸】（出价不可更改），输入出售数量，点击【确认】。</p>
            <p>进入【商券】，点击商劵右下方【出售】，选择【出售给用户】，输入挂单价格与出售数量，点击【确认】。（出售成功后会按一定比例向出售方收取芸券作为手续费）</p>
            <p>挂单后此电子券锁定不得使用。选择电子券，点击【撤回】可以撤下已挂单的电子券并解锁。</p>
            <p>商劵有效期不足3日时系统会自动下架商劵。</p>
          </div>
        </div>
        <div class="content_helpFeedback_01">
          <div><span>Q 为什么商券内已有商劵不能挂单出售？</span></div>
          <div>
            <p>商劵有效期不足3日时不可出售。</p>
          </div>
        </div>
        <div class="content_helpFeedback_01">
          <div><span>Q 底部菜单栏的“公示”有什么作用？</span></div>
          <div>
            <p>输入用户编号，可以查看该用户的公示地址，事件，以及交易信息（已加密），表明交易的公开、透明、不可篡改。</p>
            <p>查看加入计划用户总数，滚动显示其他用户交易事件。</p>
          </div>
        </div>
      </div>

      <!-- 问题反馈-->
      <div v-show="indexTab == 1 " class="content_helpFeedback">
        <div class="content_helpFeedback_02">
          <ul>
            <li v-for="(list, index) in list" :class="{'active':ind === index}" @click="changeBgc(index)">{{list}}</li>

          </ul>
          <!--图片上传-->
          <textarea @keydown="keydown" maxlength="200" v-model="commentCont"
                    :placeholder="this.userInfo.usrName?'Hi:'+this.userInfo.usrName+',请留下您的反馈详情哦...':'Hi,请留下您的反馈详情哦...'">

         		</textarea>
          <div class="pic_content">
            <ul class="pic_content_ul" style="padding: 0;background: none;">
              <li class="pic_content_li" v-for="(item, index) in imagesArray" @click="previewImage(item)">
                <img :src="item"/>
                <span @click="removeImg($event,index)"><i class="iconfont icon-shanchu"></i></span>
              </li>
            </ul>
            <div class="uploadImg" v-show="imagesArray.length < 3">
              <svg @click="openAlbum" class="icon">
                <use xmlns:xlink="http://www.w3.org/1999/xlink"
                     xlink:href="#icon-shangchuanzhaopian-"></use>
              </svg>
            </div>

            <div v-show="imagesArray.length < 3"><span>上传照片</span></div>
          </div>
          <div class="content_helpFeedback_phone">
            <span>联系方式</span>
            <input type="tel" style="text-align: right;" placeholder="请留下你的手机号哦" v-model="phoneValue" maxlength="11"
                   onkeyup='this.value=this.value.replace(/\D/gi,"")'/>
          </div>
          <div class="content_helpFeedback_btn">
            <button @click="doCommentC()">提交</button>
          </div>
        </div>
      </div>
    </form>
    　　
    <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>
  </div>
</template>
<script>
  import header from '../../componentes/global/header.vue'
  import * as types from '../../vuex/types.js'
  import {mapState} from 'vuex'
  import getData from '../../service/getData.js'
  import {Toast} from 'mint-ui'

  var formData = new FormData();
  export default {
    data: () => ({
      blockInfo: {},
      indexTab: 0,
      list: ['商家', '账号', '支付', '其它'],
      ind: 0,
      commentCont: "",
      images: [],
      imagesArray: [],
      phoneValue: "",
      imgCount: 3,
      isFixed: false
    }),
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo
      }),
    },
    created: function () {
      // 监视滚动
      window.addEventListener('scroll', this.handleScroll);
      this.$emit('header-info', {
        title: '帮助与反馈',
        isBack: true,
        isMessage: false
      })
      document.body.scrollTop = 0;
      this.$store.commit(types.HEAD_TEXT, "帮助与反馈");
      this.$store.commit(types.HEAD_BACK_ICON, true);
      this.$store.commit(types.HEAD_MES_ICON, false);
      this.$store.commit(types.HEAD_BACK_ICON, true);
    },
    methods: {
      //监听滚动事件
      handleScroll() {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop >= 48) {
          this.isFixed = true
        } else {
          this.isFixed = false
        }
      },
      keydown() {
        if (this.commentCont.length == 200) {
          Toast({
            message: '不能超过200字!',
            duration: 1000
          });
        }
      },
      tabSwitch: function (num) {
        this.indexTab = num;
        if (num == 1) {
          document.getElementsByTagName("p")[0].style.borderBottom = "none"
          document.getElementsByTagName("p")[0].getElementsByTagName("span")[0].style.color = "#595959"
          document.getElementsByTagName("p")[1].style.borderBottom = "2px solid #ec4e8a"
          document.getElementsByTagName("p")[1].getElementsByTagName("span")[0].style.color = "#ec4e8a"
        }
        if (num == 0) {
          document.getElementsByTagName("p")[1].style.borderBottom = "none"
          document.getElementsByTagName("p")[1].getElementsByTagName("span")[0].style.color = "#595959"
          document.getElementsByTagName("p")[0].style.borderBottom = "2px solid #ec4e8a"
          document.getElementsByTagName("p")[0].getElementsByTagName("span")[0].style.color = "#ec4e8a"
        }
      },
      changeBgc: function (index) {
        this.ind = index
      },
      // 提交
      doCommentC: function () {
        document.forms[0].target = "rfFrame";
        if (!this.commentCont) {
          Toast({
            message: '内容不能为空',
            duration: 1000
          });
          formData = new FormData();
          return false;
        } else {
          formData.append("type", ["mcht", "account", "pay", "other"][this.ind])
          formData.append("dsc", this.commentCont)
          formData.append("usrId", this.userInfo.usrId)
        }
        if (this.phoneValue && !(/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(this.phoneValue))) {
          Toast({
            message: '请输入正确的手机号',
            duration: 1000
          });
          formData = new FormData();
          return false;
        } else {
          formData.append("mobileNo", this.phoneValue)
        }
        var me = this
        me.$store.commit('changeState', true)
        getData.picUpload({'method': 'post', data: formData}).then(rep => {

          if (rep.respCode == '00') {

            Toast({
              message: '提交成功',
              duration: 800
            });
            formData = new FormData();
            me.$router.push({path: '/center'});
          } else {
            Toast({
              message: "提交失败",
              duration: 800
            });
          }
        }).catch(rep => {

        })
        formData = new FormData();
      },
      createImage: function (file) {
        var vm = this
        var reader = null
        var leng = file.length
        for (var i = 0; i < leng; i++) {
          reader = new window.FileReader()
          reader.readAsDataURL(file[i])
          reader.onload = function (e) {
            vm.images.push(e.target.result)
          }
        }
      },
      deleteImage: function (e) {
        this.images.splice(e, 1);
        // this.images1.splice(e,1);
      },
      removeImg: function (e, index) {
        event.stopPropagation()
        this.imagesArray.splice(index, 1);
        this.imgCount++;
      },
      //打开相机
      openAlbum: function () {
        let me = this;

        wx.chooseImage({
          count: me.imgCount, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            // 上传图片不能超过五个
            let localIdsLen = localIds.length
            me.imgCount = me.imgCount - localIdsLen
            me.imagesArray = me.imagesArray.concat(localIds);
            me.uploadImg(localIds)
          }
        });

      },
      //图片上传到服务器
      uploadImg: function (imgIds) {
        let me = this;
        var imgArray = imgIds, mediaIds = [], count = 0;
        upLoad();

        function upLoad() {
          if (count == imgArray.length) {
            formData.append("mediaId", mediaIds.join("+"));
            return;
          }
          wx.uploadImage({
            localId: imgArray[count].toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
              mediaIds.push(res.serverId)// 返回图片的服务器端ID
              count++;
              upLoad();
            },
            error: function (res) {
              console.info(res);
            }
          });
        }


      },
      previewImage: function (item) {
        let me = this;
        wx.previewImage({
          current: item, // 当前显示图片的http链接
          urls: me.imagesArray // 需要预览的图片http链接列表
        });
      },


    }
  }
</script>
<style scoped>
  .isFixed {
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
  }

  .zong {
    background: #FFFFFF;
    height: 100%;
  }

  .footer_helpFeedback {
    height: 2.9rem;
    background-color: #fff;
  }

  .footer_helpFeedback p:nth-of-type(1) {
    float: left;
    margin-left: 4.87rem;
  }

  .footer_helpFeedback p:nth-of-type(2) {
    float: right;
    margin-right: 4.87rem;
  }

  .footer_helpFeedback p span {
    line-height: 2.9rem;
    color: #868686;
  }

  /*Tab点击样式变化*/
  .footer_helpFeedback .color_p {
    color: #ec4e8a;
    border-bottom: 2px solid #ec4e8a;
  }

  .footer_helpFeedback .color_p span {
    color: #ec4e8a;
  }

  /*常见问题*/
  .content_helpFeedback_01 div:nth-of-type(1) {
    text-indent: 1rem;
    height: 2.9rem;
    color: #258579;
    line-height: 2.9rem;
    border-top: 3px solid #f5f5f5;
    border-bottom: 2px dashed #f5f5f5;
  }

  .content_helpFeedback_01 div:nth-of-type(2) {
    padding: 1rem;
    color: #666666;
  }

  .content_helpFeedback_01 div:nth-of-type(2) p {
    margin: 0 0 0.5rem 0;
  }

  /*问题反馈*/
  .content_helpFeedback {
    height: 100%;
    background: #FFFFFF;
  }

  .content_helpFeedback_02 {
    margin-top: 0.2rem;
    height: 100%;
  }

  .content_helpFeedback_02 ul:nth-of-type(1) {
    height: 4.06rem;
    background: #f5f5f5;
    padding-top: 1rem;
  }

  .content_helpFeedback_02 ul:nth-of-type(1) li {
    font-size: 1rem;
    text-align: center;
    width: 4.47rem;
    height: 1.64rem;
    line-height: 1.625rem;
    text-align: center;
    border-radius: .3rem;
    background: #FFFFFF;
    margin: 0 0.7rem 0 0.8rem;
    float: left;
  }

  .content_helpFeedback_02 ul:nth-of-type(1) .active {
    background: #ec4e89;
    color: #FFFFFF;
  }

  textarea {
    height: 9.63rem;
    width: 100vw;
    resize: none;
    outline: none;
    padding: 1rem 0.5rem;
    font-size: 1rem;
    color: #a6a6a6;
  }

  .pic_content {
    height: 6rem;
    border-top: 2px solid #f5f5f5;
    border-bottom: 4px solid #f5f5f5;
    padding-top: 1rem;
  }

  .pic_content div:nth-of-type(1) {
    width: 3.66rem;
    height: 3.66rem;
    float: left;
    text-align: center;
    line-height: 3.66rem;
    background: #f5f5f5;
    margin-left: 1rem;
  }

  .pic_content div:nth-of-type(1) span {
    font-size: 2rem;
    color: #a6a6a6;
  }

  .pic_content div:nth-of-type(2) {
    width: 5.66rem;
    height: 3.66rem;
    float: left;
    line-height: 3.66rem;
    text-indent: 1rem;
  }

  .pic_content div:nth-of-type(2) span {
    color: #a6a6a6;
  }

  /*手机号*/
  .content_helpFeedback_phone {
    height: 2.7rem;
    border-top: 4px solid #f5f5f5;
    line-height: 2.7rem;
    text-indent: 1rem;
  }

  .content_helpFeedback_phone span {
    color: #5a5a5a;
  }

  .content_helpFeedback_phone input {
    float: right;
    height: 100%;
    text-indent: 1rem;
    color: #a6a6a6;
    font-size: 1rem;
    margin-right: 1rem;
  }

  .content_helpFeedback_btn button {
    width: 16.56rem;
    height: 2.34rem;
    border-radius: .3rem;
    background: #ec4e89;
    margin: 1.84rem 0 0 4.5rem;
    color: #FFFFFF;
    font-size: 0.9rem;
  }

  /*显示图片*/
  .pic_content .pic_content_ul {
    padding: 0;
    float: left;
  }

  .pic_content .pic_content_ul .pic_content_li {
    float: left;
    margin: 0;
  }

  .pic_content .pic_content_ul .pic_content_li img {
    width: 4.06rem;
    height: 4.06rem;
  }

  .pic_content .pic_content_ul .pic_content_li span i {
    position: relative;
    left: 1.9rem;
    top: -5.3rem;
  }

  .pic_content .uploadImg svg {
    width: 1em;
    height: 1em;
    font-size: 2rem;
    margin: 0.8rem 0 0 0.2rem;
  }
</style>
